<template>
  <div>
    <van-nav-bar
      :title="querInfo.isme"
      left-text="返回"
      right-text="操作"
      left-arrow
      @click-left="onClickLeft"
      @click-right="showapplie = true"
    />
    <el-table stripe show-summary :data="myapplielist" @cell-click="checkBtn">
      <el-table-column type="index" width="45px"></el-table-column>
      <el-table-column label="申请时间" width="130">
        <template v-slot="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{
            new Date(scope.row.applyDate)
              .toLocaleString('chinese', { hour12: false })
              .substring(5)
          }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="username"
        label="姓名"
        width="80px"
      ></el-table-column>
      <el-table-column
        prop="giftName"
        label="礼品名称"
        width="80px"
      ></el-table-column>
      <el-table-column
        prop="num"
        label="申请数量"
        width="50px"
      ></el-table-column>
      <el-table-column label="申请状态" width="80px">
        <template v-slot="scope">
          <span style="margin-left: 10px">{{ status[scope.row.status] }}</span>
        </template>
      </el-table-column>
      <el-table-column label="申请备注" width="200px">
        <template v-slot="scope">
          <span style="margin-left: 10px" v-for="item in scope.row.memo">{{
            item.username + ': ' + item.context
          }}</span>
        </template>
      </el-table-column>
    </el-table>

    <!-- 申请条件筛选 -->
    <van-overlay :show="showapplie" @click="showapplie = false">
      <div class="wrapper">
        <div class="block" @click.stop>
          <van-cell title="选择日期区间" :value="date" @click="show = true" />
          <van-calendar
            v-model="show"
            type="range"
            :min-date="new Date(2020)"
            @confirm="onConfirm"
            :show-confirm="false"
          />
          <van-field
            readonly
            clickable
            name="picker"
            :value="querInfo.isme"
            label="条件"
            placeholder="点击选择城市"
            @click="showagg = true"
          />
          <van-field
            readonly
            clickable
            name="picker"
            :value="querInfo.status"
            label="条件"
            placeholder="点击选择城市"
            @click="showstatus = true"
          />
          <div class="footerbutton">
            <van-button round type="warning" @click="getBtn">确 认</van-button>
            <van-button
              round
              type="warning"
              @click=";(showdig = true), (showapplie = false), getGiftList()"
              >申 请</van-button
            >
          </div>
        </div>
      </div>
    </van-overlay>
    <!-- 审核弹窗 -->
    <van-overlay :show="showcheck" @click="showcheck = false">
      <div class="wrapper">
        <div class="checkblock" @click.stop>
          <van-cell-group>
            <van-field
              v-model="checkdata.memo"
              label="备注"
              placeholder="备注一下吧!"
            />
          </van-cell-group>
          <van-button
            round
            type="warning"
            @click="check(), (checkdata.check = false)"
            >不通过</van-button
          >
          <van-button
            round
            type="warning"
            @click="check(), (checkdata.check = true)"
            >通 过</van-button
          >
        </div>
      </div>
    </van-overlay>
    <!-- 申请礼品 -->
    <van-overlay :show="showdig" @click="showdig = false">
      <div class="wrapper">
        <div class="block" @click.stop>
          <van-form @submit="onSubmit">
            <van-field
              readonly
              clickable
              name="picker"
              :value="applieForm.giftName"
              label="礼品"
              placeholder="选择礼品"
              @click="showPicker = true"
              :rules="[{ required: true, message: '请选择礼品' }]"
            />
            <van-field
              v-model.number="applieForm.num"
              label="申请数量"
              :rules="[{ required: true, message: '请填写数量' }]"
            />
            <van-field
              v-model="applieForm.memo"
              label="申请备注"
              :rules="[{ required: true, message: '请填写备注' }]"
            />
            <div style="margin: 16px">
              <van-button round block type="info" native-type="submit">
                提交
              </van-button>
            </div>
          </van-form>
        </div>
      </div>
    </van-overlay>
    <van-popup v-model="showPicker" position="bottom">
      <van-picker
        show-toolbar
        :columns="giftname"
        value-key="_id"
        @confirm="onConfirmgift"
        @cancel="showPicker = false"
      />
    </van-popup>
    <!--  -->
    <van-popup v-model="showagg" position="bottom">
      <van-picker
        show-toolbar
        :columns="agg"
        @confirm="selectagg"
        @cancel="showagg = false"
      />
    </van-popup>
    <van-popup v-model="showstatus" position="bottom">
      <van-picker
        show-toolbar
        :columns="status"
        @confirm="selectstatus"
        @cancel="showstatus = false"
      />
    </van-popup>
  </div>
</template>

<script>
import { Toast, Notify } from 'vant'
export default {
  data() {
    return {
      giftname: [],
      showPicker: false,
      showdig: false,
      showapplie: false,
      // 申请列表
      myapplielist: [],
      querInfo: {
        isme: '我的申请',
        status: '申请中',
        date: '',
      },
      // 申请状态
      status: ['申请中', '通过', '不通过'],
      date: '',
      show: false,
      showagg: false,
      agg: ['我的申请', '下级申请'],
      showstatus: false,
      showcheck: false,
      temprow: {},
      checkdata: {},
      applieForm: {},
    }
  },
  created() {
    this.getapply()
  },
  methods: {
    // 返回上一个页面
    onClickLeft() {
      this.$router.go(-1)
    },
    // 获取申请列表
    async getapply() {
      const { data: res } = await this.$http.post(
        '/hx/myapplielist',
        this.querInfo
      )
      if (res.meta.status !== 200) {
        return Notify({ type: 'danger', message: res.meta.msg })
      }
      this.myapplielist = res.data
    },
    // 获取下级申请列表
    async applielist() {
      const { data: res } = await this.$http.post(
        '/hx/applielist',
        this.querInfo
      )
      if (res.meta.status !== 200) {
        return Notify({ type: 'danger', message: res.meta.msg })
      }
      this.myapplielist = res.data
    },
    formatDate(date) {
      return `${date.getMonth() + 1}/${date.getDate()}`
    },
    // 时间
    onConfirm(date) {
      const [start, end] = date
      this.show = false
      this.date = `${this.formatDate(start)} - ${this.formatDate(end)}`
      this.querInfo.date = date
    },
    // 获取申请是自己还是下级
    getBtn() {
      if (this.querInfo.isme == '我的申请') {
        this.getapply()
      } else if (this.querInfo.isme == '下级申请') {
        this.applielist()
      }
    },
    selectagg(value) {
      this.querInfo.isme = value
      this.showagg = false
    },
    selectstatus(value) {
      this.querInfo.status = value
      this.showstatus = false
    },
    checkBtn(row) {
      if (this.querInfo.isme == '我的申请') {
        return
      }
      this.showcheck = true
      this.checkdata.id = row._id
    },
    // 审核礼品
    async check() {
      const { data: res } = await this.$http.post(
        '/hx/checkapplie',
        this.checkdata
      )
      if (res.meta.status !== 200) {
        return Notify({ type: 'danger', message: res.meta.msg })
      }
      Notify({ type: 'success', message: res.meta.msg })
      this.myapplielist.forEach((item, index) => {
        if (item._id == this.checkdata.id) {
          this.myapplielist.splice(index, 1)
        }
      })
      this.editapplieshow = false
    },
    onConfirmgift(value) {
      this.applieForm.giftName = value._id
      this.showPicker = false
    },
    async onSubmit(values) {
      const { data: res } = await this.$http.post(
        '/hx/appliegift',
        this.applieForm
      )
      if (res.meta.status !== 200) {
        return Notify({ type: 'danger', message: res.meta.msg })
      }
      Notify({ type: 'success', message: res.meta.msg })
      this.myapplielist.push(res.data)
      this.showdig = false
    },
    // 后台礼品列表
    async getGiftList() {
      const { data: res } = await this.$http.post('/hx/getgiftlist')
      if (res.meta.status !== 200) {
        return Notify({ type: 'danger', message: res.meta.msg })
      }
      this.giftname = res.data
    },
  },
}
</script>

<style lang="less" scope>
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.checkblock {
  position: relative;
  text-align: center;
  width: 300px;
  height: 130px;
  background-color: #fff;
  line-height: 100px;
  .van-button {
    margin: 0 5px;
    width: 100px;
  }
  .van-field {
    width: 300px;
  }
}

.block {
  position: relative;
  text-align: center;
  width: 200px;
  height: 200px;
  background-color: #fff;
  .footerbutton {
    position: absolute;
    bottom: 10px;
    left: 24px;
    .van-button {
      width: 60px;
    }
  }
}
</style>